html{font-size: 14px!important;}
body{ font-family: '微软雅黑'!important; /*line-height: 1.571429;*/}
/* 首页栏目标题 */
.index-column-title{margin: 3.214286rem auto 2.642857rem; text-align: center;}
.index-column-title span{font-size: 16px; color: #666;}
.index-column-title h2{margin: 0 0 .571429rem; font-size: 30px; color: #333;}
.index-column-title div{width: 2.857143rem; height: .214286rem; margin: 0 auto; background-color: #108be1;}
/* 首页关于我们 */
.about{display: flex; color: #444; margin-bottom: 2.571429rem;}
.about .left{display: flex; align-items: center;}
.about .left img{width: 33rem; margin-right: 2rem;}
.about .right{display: flex; flex-direction: column; justify-content: center; flex: 1;}
.about .right > div:nth-child(1){position: relative; padding-left: 1.214286rem; font-size: 22px;}
.about .right > div:nth-child(1)::before{content: ''; position: absolute; left: 0; top: 0; bottom: 0; display: block; margin: auto; width: .642857rem; height: 1.714286rem; background: url(../images/title-before.png) no-repeat center/100% 100%;}
.about .right > span{padding-left: 1.214286rem; color: #999;}
.about .right > div:nth-child(3){margin: 1.785714rem 0 2.5rem; font-size: 16px; text-align: justify; color: #444;}
.about .right > div:nth-child(3) p{margin: 0;line-height: 25px;}
.about .right > a{display: block; width: 7rem; height: 2.428571rem; line-height: 2.428571rem; border: .071429rem solid #108be1; text-align: center; color: #108be1;}
.about .right > a:hover{background-color: #108be1; color: #fff;}
@media screen and (max-width: 768px){
  .about .left img{width: 21.428571rem;}
}
@media screen and (max-width: 767px){
  .about{display: block;padding: 0 15px;}
  .about .left img{width: 100%; margin-right: 0;}
  .about .right{margin-top: 1.428571rem;}
}

/* 首页案例简介 */
.case-desc{display: flex;}
.case-desc > div{display: flex; text-align: center;}
.case-desc > div > div{margin-left: 3.214286rem;}
.case-desc .left > div:nth-child(1){margin-left: 0;}
.case-desc > div > div img{width: 10.285714rem;}
.case-desc > div > div p{margin: 1.071429rem 0 .5rem; font-size: 18px; color: #108be1;}
.case-desc > div > div > div{margin-bottom: .714286rem;}
.case-desc > div > div a:hover{color: #108be1;}
@media screen and (max-width: 768px){
  .case-desc > div > div p{font-size: 16px;}
}
@media screen and (max-width: 767px){
  .case-desc{display: block;padding: 0 15px;}
  .case-desc .right{margin-top: 2.142857rem;}
  .case-desc .right > div:nth-child(1){margin-left: 0;}
}
/* 首页案例展示 */
.case-title{
  margin-bottom: 0;
}
.case-wrap{width: 100%;margin: 3.571429rem auto 0; padding-bottom: 2.857143rem;}
.case-wrap .swiper-case{width: 100%;margin: 0 auto; padding: 0;}
.case-wrap .swiper-case .swiper-wrapper{width: 100%;}
.case-wrap .swiper-case .swiper-slide{width: 19rem;}
.case-wrap .swiper-case .box > a{display: block;}
/* .case-wrap .swiper-case .box > a.case-img{position: relative;}
.case-wrap .swiper-case .box > a.case-img::before{content: ''; display: block; padding-top: 100%;} */
.case-wrap .swiper-case .box > a .img-box{/*position: absolute; top: 0; left: 0;*/ width: 100%; height: 100%;}
.case-wrap .swiper-case .box > a .img-box img{width: 100%; /*height: 100%;*/}
/* 鼠标悬停效果1 */
.case-wrap .swiper-case .box > a .case-hover{position: absolute; top: 0; left: 0; padding: .714286rem; width: 100%; height: 100%; background-color: rgba(16,139,225,.8); opacity: 0; transition: all .5s}
.case-wrap .swiper-case .box > a .case-hover > div{display :flex; align-items:center; justify-content:center; box-sizing: border-box; height: 100%; text-align: center;}
.case-wrap .swiper-case .box > a .case-hover > div span{width: 100%;}
.case-wrap .swiper-case .box > a .case-hover > div span p{margin: 0; color: #fff;}
.case-wrap .swiper-case .box > a .case-hover > div span p:nth-child(1){padding: 0 15% 2.857143rem; font-size: 22px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.case-wrap .swiper-case .box > a .case-hover > div span p:nth-child(2){display: inline-block; width: auto; margin: .357143rem 0 0; padding: 0 0 .142857rem; border-bottom: .071429rem solid #fff; font-size: 16px;}
.case-wrap .swiper-case .box > a .case-hover:hover{opacity: 1;}

.case-wrap .case-swiperbox{position: relative;width: 100%;}/*专门给按钮定位的框*/

@media screen and (max-width: 1024px){

}
@media screen and (max-width: 767px){
  .case-wrap {
    width: 100%;
    margin: 3.571429rem auto 0;
    padding: 0 15px;
    padding-bottom: 2.857143rem;
}
  .case-wrap .swiper-case{margin: 0 auto;}
  .case-wrap .swiper-case .box a p{padding: .714286rem .714286rem;}
}

/* 首页新闻 */
.news{width: 100%; display: flex; position: relative; margin-bottom: 3.214286rem;}
.news img{position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 33rem;}
.news .news-wrap{display: flex; width: 91.463414%; box-sizing: border-box; margin-left: auto; padding: 3.928571rem 0; border: .142857rem solid #108be1;}
.news-wrap .news-box{width: 56%; margin-left: auto; margin-right: 6.190476%; padding-bottom: 1.071429rem;}
.news-wrap .news-box > div{padding-bottom: .714286rem; border-bottom: .071429rem solid #ccc;}
.news-wrap .news-box > div a{width: 100%;display: block;}
.news-wrap .news-box > div p{margin: .714286rem 0 .357143rem; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #108be1;}
.news-wrap .news-box > div div{text-align: justify; color: #666;}
@media screen and (max-width: 1024px){
  .news img{margin: auto auto auto -4%;}
  .news-wrap .news-box{width: 55%; margin-right: 1.3%; padding-bottom: .714286rem;}
}
@media screen and (max-width: 768px){
  .news .news-wrap{padding: 1.785714rem 0;}
  .news img{width: 23.928571rem;}
  .news img {
    margin: auto auto auto 0%;
}
}
@media screen and (max-width: 767px){
  .news{padding: 0 15px;display: block;}
  .news-title{margin-top: 0;}
  .news img{position: unset; right: 0; bottom: unset; top: 0; margin: auto; width: 100%;}
  .news .news-wrap{width: 100%; margin: auto; padding: 0 0; margin-top: 20px;}
  .news-wrap .news-box{margin: 0 auto; width: 95%;}
}

/* 首页产品展示 */
.product-wrap{margin: 0 auto 0;}
.product-wrap .swiper-product{margin: 0 4rem;/*42px*/ padding: 0;}
.product-wrap .swiper-product .swiper-slide{width: 19rem;}
.product-wrap .swiper-product .box > a{display: block;}
/* .product-wrap .swiper-product .box > a.product-img{position: relative;}
.product-wrap .swiper-product .box > a.product-img::before{content: ''; display: block; padding-top: 100%;} */
.product-wrap .swiper-product .box > a .img-box{/*position: absolute; top: 0; left: 0;*/ width: 100%; height: 100%;}
.product-wrap .swiper-product .box > a .img-box img{width: 100%; /*height: 100%;*/}

.product-wrap .swiper-product .box > a p{width: 100%; margin: 0; padding: .714286rem 2.142857rem; font-size: 14px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #666;}
.product-wrap .swiper-product .box:hover > a p{color: #108be1;}

.product-wrap .product-swiperbox{width: 100%; position: relative;}/*专门给按钮定位的框*/
.pbutton{position: absolute; top: 33%;width: 100%;}
.product-wrap .product-swiperbox .product-prev-btn{float: left; left: -1.428571rem;/*-20px*/ width: 42px; height: 50px; background: url(../images/n-arrow-l.png) no-repeat center/100% auto;}
.product-wrap .product-swiperbox .product-next-btn{float: right; right: -1.428571rem;/*-20px*/ width: 42px; height: 50px; background: url(../images/n-arrow-r.png) no-repeat center/100% auto;}

@media screen and (max-width: 1024px){
  .product-wrap .product-swiperbox .product-prev-btn{left: -.357143rem;/*-5px*/}
  .product-wrap .product-swiperbox .product-next-btn{right: -.357143rem;/*-5px*/}
}
@media screen and (max-width: 767px){
  .product-wrap{padding: 0 15px;}
  .product-wrap .swiper-product{margin: 0 auto;}
  .product-wrap .swiper-product .box a p{padding: .714286rem .714286rem;}
  .product-wrap .product-swiperbox .product-prev-btn{display: none;}
  .product-wrap .product-swiperbox .product-next-btn{display: none;}
}


@media(max-width:767px){
  .online{
    bottom: 35% !important;
  }
  #newBridge .nb-icon-wrap{
    left: 5px !important;
    right: auto !important;
  }
  .case-wrap .swiper-case .box > a .case-hover > div span p:nth-child(1){
    padding: 0 10px 0.857143rem;
  }
}